<template>
  <div class="head">
    <div class="container head-content">
      <div class="head-on">
        <div class="title">
          <img class="number-img" src="../../../assets/images/number-img.png" alt="" @click="GoHome">
        </div>
        <div v-if="!state" class="head-search" @click="GoSearch">
          <div class="search">
            <input type="text" class="head-input">
          </div>
          <div class="search-btn">
            搜索
          </div>
        </div>
        <div v-if="!state" class="head-information">
          <div class="recruitment" @click="merchantEnter">
            <i class="iconfont icon-shop shop" />
            <span>商家入驻</span>
          </div>
          <div class="number-cart" @click="shoppingCart">
            <i class="iconfont icon-cart cart" />
            购物车
            <i class="iconfont icon-triangle" />
          </div>
          <div />
        </div>
        <div v-if="state" class="user-detail">
          <div class="img">
            <img class="img" :src="shopDetail.sellerImage" alt="">
          </div>
          <div class="name">
            {{ shopDetail.sellerName }}
          </div>
        </div>
      </div>
      <div class="head-in">
        <div class="head-text">首页</div>
        <div class="head-text" @click="goDetail">品牌中心</div>
        <div class="head-text">行业信息</div>
      </div>
    </div>
  </div>
</template>
<script>
import { toSearchPage } from '@/js/product'
export default {
  name: 'Head',
  props: {
    state: Boolean,
    shopDetail: Object
  },
  data() {
    return {

    }
  },
  methods: {
    goDetail() {
      this.$router.push({
        path: '/detail'
      })
    },
    GoSearch() {
      toSearchPage(this)
    },
    GoHome() {
      this.$router.push({
        path: '/'
      })
    },
    merchantEnter() {
      this.$router.push({
        path: '/recruitment'
      })
    },
    shoppingCart() {
      this.$router.push({
        path: '/cart'
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/assets/style/common-color.scss";
    .head{
        .head-content{
            .head-on{
                display:flex;
                background:#FFFFFF;
                .title{
                    margin-right:139px;
                    .number-img{
                        width:191px;
                        height:72px;
                    }
                }
                .head-search{
                    display:flex;
                    margin-right:56px;
                    align-items:center;
                    .search{
                        .head-input{
                            width:457px;
                            height:40px;
                            border-style:solid;
                            border-width:1px;
                            border-color:#FF3B30;
                        }
                    }
                    .search-btn{
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        width:101px;
                        height:40px;
                        background:#FF3B30;
                        color:#FFFFFF;
                    }
                }
                .head-information{
                    display:flex;
                    align-items:center;
                    .recruitment{
                      width: 97px;
                      height: 40px;
                      text-align: center;
                      line-height: 40px;
                      background: #F9F9F9;
                      border: 1px solid #DFDFDF;
                      margin-right: 25px;
                      color: #707070;
                      cursor: pointer;
                      .shop{
                        margin-right: 8px;
                      }
                    }
                    .number-cart{
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        width:123px;
                        height:40px;
                        font-size:13px;
                        border:1px solid rgba(223,223,223,1);
                        margin-right:17px;
                        opacity:1;
                        background: #F9F9F9;
                        cursor: pointer;
                        .triangle{
                            border-style: solid;
                            border-width: 5px 7px 7px 7px;
                            border-color: transparent transparent #666666 transparent;
                            width: 0px;
                            height: 0px;
                        }
                        .cart{
                          font-size: 24px;
                        }
                    }
                }
                .user-detail{
                  display: flex;
                  align-items: center;
                  .img{
                    width: 32px;
                    height: 32px;
                    background: #FFFFFF;
                    margin-right: 12px;
                  }
                  .name{
                    color: #3D3D3D;
                    font-size: 18px;
                  }
                }
            }
            .head-in{
                display:flex;
                width:1903px;
                height:37px;
                align-items:center;
                background:#FFFFFF;
                .head-text{
                    margin-right:30px;
                }
            }
        }
    }
</style>
